<template>
  <div>
    <!-- 轮播图 -->
    <div class="carousel banxin">
      <div class="block">
        <el-carousel height="460px">
          <el-carousel-item v-for="item in carouselList" :key="item.carousel_id">
            <img class="carouselImg" :src="$target+item.imgPath" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="contentBox">
      <div class="box banxin">
        <!-- 手机 -->
        <div class="phone">
          <div class="box-hd">
            <p>手机</p>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <img src="/image/phone.png" alt />
            </div>
            <div class="list">
                <ul>
                  <my-list :listData="phoneList"> </my-list>
                </ul>
            </div>
          </div>
        </div>
        <!-- 家电 -->
        <div class="appliances">
          <div class="box-hds">
            <p>
              <span>家电</span>
              <ul>
        
                <li :class="applianceActive ==1 ?'active':''" @mouseover="applianceMouseOver($event,1)" >热门</li>
                <li :class="applianceActive ==2 ?'active':''" @mouseover="applianceMouseOver($event,2)">电视影音</li>
              </ul>
            </p>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img src="/image/appliance-promo1.png" alt />
                </li>
                <li>
                  <img src="/image/appliance-promo2.png" alt />
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                  <my-list :listData="appliancesconditioner"> </my-list>
              </ul>
            </div>
          </div>
        </div>
        <!-- 配件 -->
         <div class="appliances">
          <div class="box-hds">
            <p>
              <span>配件</span>
              <ul>
                <li :class="applianceActives ==1 ?'active':''" @mouseover="applianceMouseOvers($event,1)" >热门</li>
                <li :class="applianceActives ==2 ?'active':''" @mouseover="applianceMouseOvers($event,2)">保护套</li>
                <li :class="applianceActives ==3 ?'active':''" @mouseover="applianceMouseOvers($event,3)">充电器</li>
              </ul>
            </p>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img src="/image/accessory-promo1.png" alt />
                </li>
                <li>
                  <img src="/image/accessory-promo2.png" alt />
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                  <my-list :listData="applianpartsHot"> </my-list>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../../API/Api";
export default {
  name: "",
  data() {
    return {
      carouselList: [],
      queryInfo: {
        category_id: [],
        currentPage: 1,
        pageSize: 7
      },
      // 手机和家电
      phoneList: [],
      appliancesList: [],
      conditionerList: [],
      // 配件
      partsHotList:[],
      coverListData:[],
      chargerListData:[],
      // 切换的数据
      appliancesconditioner:[],
      applianpartsHot:[],

      applianceActive: 1,
      applianceActives:1,
    };
  },
  mounted() {
    this.getCarousel();
    this.getProduct("phoneList",{"categoryName":"手机"});
    this.getProduct("appliancesList",{"categoryName":["电视机","空调","洗衣机"]}, true);
    this.getProduct("conditionerList",{"categoryName":"电视机"});
    this.getProduct("partsHotList", {"categoryName": ["保护套", "保护膜", "充电器", "充电宝"]}, true);
    this.getProduct("coverListData", {"categoryName": "保护套"});
    this.getProduct("chargerListData", {"categoryName": "充电器"});
  },
  methods: {
    getCarousel() {
      API.getCarousel().then(res => {
        // console.log(res);
        this.carouselList = res.carousel;
      });
    },
    async getProduct(dataName,data,apiName) {
      if(apiName){
          API.appliances(data).then(res=>{
           this[dataName] = res.Product;
          //  console.log(res)
          if(this.applianceActive==1){
         this.appliancesconditioner=this.appliancesList
        }
          if(this.applianceActives==1){
         this.applianpartsHot=this.partsHotList
        //  console.log(res)
        }
      })
      }else{
          API.phoneLists(data).then(res=>{
          this[dataName] = res.Product;
          // console.log(this[dataName])
      })
      }
    },
    applianceMouseOver(e,val){
        this.applianceActive=val
        // console.log(val)
    },
    applianceMouseOvers(e,val){
        this.applianceActives=val
        // console.log(val)
    }
  },
  computed: {},
  components: {},
  watch: {
      applianceActive(val){
          this.appliancesconditioner=val===1?this.appliancesList:this.conditionerList;
      },
       applianceActives(val){
          switch (val) {
            case 1:this.applianpartsHot=this.partsHotList 
            break;
            case 2:  this.applianpartsHot=this.coverListData
            break;
            case 3:  this.applianpartsHot=this.chargerListData
            break;
          }
          // console.log(  this.appliancesconditioner)
      }
  },
  getters: {}
  // filters: {
  //   imgPaths(val) {
  //     return val.replace("public/", "");
  //   }
  // }
};
</script>

<style scoped>
* ul {
  list-style: none;
}
.carouselImg {
  width: 100%;
  height: 100%;
}
.banxin {
  width: 1225.5px;
  margin: 0 auto;
}
nav {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b0b0b0;
}
.routers {
  margin-right: 280px;
}
.contentBox {
  margin-top: 20px;
  background-color: #f5f5f5;
  padding-bottom: 20px;
  height: 2059px;
}
.box {
  height: 2059px;
}
.phone {
  width: 100%;
  height: 673px;
}
.box-hd {
  width: 100%;
  height: 58px;
}
.box-hd p {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.box-bd {
  width: 100%;
  height: 615px;
}
.box-bd .promo-list {
  float: left;
  height: 615px;
  width: 234px;
}
.box-bd .promo-list img {
  width: 100%;
  height: 100%;
}
.box-bd .list {
  float: left;
  height: 615px;
  width: 991px;
}
.appliances {
  width: 100%;
  height: 673px;
  margin-top: 20px;
}
.box-hds {
  width: 100%;
  height: 58px;
}
.box-hds p{
    display: flex;
    justify-content: space-between;
}
.box-hds p span{
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.box-hds p ul{
  font-weight: 200;
  line-height: 58px;
  display: flex;
}
.box-hds p ul li{
  margin-left: 30px;
  height: 40px;
}
.box-hds p ul li.active,.box-hds p ul li:hover {
    color: #ff6700;
    border-bottom: 2px solid #ff6700;
  }
</style>